<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="search-box">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索考编资讯、题库" />
			</view>
		</view>
		
		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots autoplay circular :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image :src="item.image" mode="aspectFill" @click="openBanner(item)"></image>
			</swiper-item>
		</swiper>
		
		<!-- 功能导航 -->
		<view class="nav-grid">
			<view class="nav-item" @click="navigateTo('/pages/shanganbao/detail/detail?type=daily')">
				<view class="nav-icon daily-icon">
					<text class="iconfont icon-calendar"></text>
				</view>
				<text class="nav-text">每日一练</text>
			</view>
			<view class="nav-item" @click="navigateTo('/pages/shanganbao/detail/detail?type=wrong')">
				<view class="nav-icon wrong-icon">
					<text class="iconfont icon-wrong"></text>
				</view>
				<text class="nav-text">我的错题</text>
			</view>
			<view class="nav-item" @click="navigateTo('/pages/shanganbao/detail/detail?type=custom')">
				<view class="nav-icon custom-icon">
					<text class="iconfont icon-folder"></text>
				</view>
				<text class="nav-text">自定义题库</text>
			</view>
			<view class="nav-item" @click="navigateTo('/pages/shanganbao/detail/detail?type=favorite')">
				<view class="nav-icon favorite-icon">
					<text class="iconfont icon-star"></text>
				</view>
				<text class="nav-text">我的收藏</text>
			</view>
		</view>
		
		<!-- 签到卡片 -->
		<view class="sign-card">
			<view class="sign-header">
				<text class="sign-title">每日签到</text>
				<text class="sign-desc">连续签到7天可获得VIP体验</text>
			</view>
			<view class="sign-days">
				<view 
					class="sign-day-item" 
					v-for="(item, index) in 7" 
					:key="index"
					:class="{'signed': index < signDays, 'today': index === signDays}"
				>
					<text class="day-num">{{index + 1}}</text>
					<text class="day-text">{{index < signDays ? '已签' : (index === signDays ? '今天' : '未签')}}</text>
				</view>
			</view>
			<view class="sign-btn" @click="signIn" :class="{'signed': isSignedToday}">
				{{isSignedToday ? '已签到' : '立即签到'}}
			</view>
		</view>
		
		<!-- 招聘资讯 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">招聘资讯</text>
				<text class="more-link" @click="navigateTo('/pages/shanganbao/news/news')">更多</text>
			</view>
			<view class="news-list">
				<view class="news-item" v-for="(item, index) in newsList" :key="index" @click="openNews(item)">
					<image class="news-image" :src="item.image" mode="aspectFill"></image>
					<view class="news-content">
						<text class="news-title">{{item.title}}</text>
						<view class="news-info">
							<text class="news-source">{{item.source}}</text>
							<text class="news-time">{{item.time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 热门题库 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">热门题库</text>
				<text class="more-link" @click="switchTab('/pages/shanganbao/question/question')">更多</text>
			</view>
			<view class="hot-banks">
				<view class="bank-item" v-for="(item, index) in hotBanks" :key="index" @click="openQuestionBank(item)">
					<view class="bank-info">
						<text class="bank-title">{{item.title}}</text>
						<text class="bank-count">{{item.questionCount}}题</text>
					</view>
					<view class="bank-tags">
						<text class="bank-tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
					</view>
					<view class="bank-footer">
						<text class="bank-users">{{item.userCount}}人在学</text>
						<text class="bank-btn">开始做题</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [
					{
						id: 1,
						image: '/static/shuijiao.jpg',
						url: '/pages/shanganbao/news/detail?id=1'
					},
					{
						id: 2,
						image: '/static/shuijiao.jpg',
						url: '/pages/shanganbao/news/detail?id=2'
					},
					{
						id: 3,
						image: '/static/shuijiao.jpg',
						url: '/pages/shanganbao/news/detail?id=3'
					}
				],
				signDays: 3,
				isSignedToday: false,
				newsList: [
					{
						id: 1,
						title: '2025年国家公务员考试报名时间及入口',
						image: '/static/shuijiao.jpg',
						source: '人社部',
						time: '2025-08-30'
					},
					{
						id: 2,
						title: '2025年事业单位招聘公告汇总',
						image: '/static/shuijiao.jpg',
						source: '事业单位招聘网',
						time: '2025-08-28'
					},
					{
						id: 3,
						title: '教师资格证考试大纲发布，这些变化要注意',
						image: '/static/shuijiao.jpg',
						source: '教育部',
						time: '2025-08-25'
					}
				],
				hotBanks: [
					{
						id: 1,
						title: '2025国考行测真题',
						questionCount: 100,
						tags: ['行测', '国考'],
						userCount: 5280
					},
					{
						id: 2,
						title: '事业单位公共基础知识',
						questionCount: 200,
						tags: ['公基', '事业单位'],
						userCount: 3150
					},
					{
						id: 3,
						title: '教师资格证考前押题',
						questionCount: 150,
						tags: ['教资', '教育知识'],
						userCount: 2760
					}
				]
			}
		},
		onLoad() {
			// 页面加载时的逻辑
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			switchTab(url) {
				uni.switchTab({
					url: url
				});
			},
			openBanner(item) {
				uni.navigateTo({
					url: item.url
				});
			},
			signIn() {
				if (this.isSignedToday) {
					uni.showToast({
						title: '今日已签到',
						icon: 'none'
					});
					return;
				}
				
				// 模拟签到
				this.isSignedToday = true;
				if (this.signDays < 7) {
					this.signDays++;
				}
				
				uni.showToast({
					title: '签到成功',
					icon: 'success'
				});
			},
			openNews(item) {
				uni.navigateTo({
					url: `/pages/shanganbao/news/detail?id=${item.id}`
				});
			},
			openQuestionBank(item) {
				uni.navigateTo({
					url: `/pages/shanganbao/detail/detail?type=bank&id=${item.id}`
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 搜索栏 */
	.search-bar {
		background-color: #1296db;
		padding: 10px 15px;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 20px;
		padding: 6px 12px;
	}
	
	.search-box .iconfont {
		font-size: 16px;
		color: #999;
		margin-right: 5px;
	}
	
	.search-box input {
		flex: 1;
		font-size: 14px;
		color: #333;
	}
	
	/* 轮播图 */
	.banner {
		height: 180px;
	}
	
	.banner image {
		width: 100%;
		height: 100%;
	}
	
	/* 功能导航 */
	.nav-grid {
		display: flex;
		background-color: #FFFFFF;
		padding: 15px 0;
		margin-bottom: 10px;
	}
	
	.nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nav-icon {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8px;
	}
	
	.nav-icon .iconfont {
		font-size: 24px;
		color: #FFFFFF;
	}
	
	.daily-icon {
		background-color: #1296db;
	}
	
	.wrong-icon {
		background-color: #f5222d;
	}
	
	.custom-icon {
		background-color: #52c41a;
	}
	
	.favorite-icon {
		background-color: #faad14;
	}
	
	.nav-text {
		font-size: 14px;
		color: #333;
	}
	
	/* 签到卡片 */
	.sign-card {
		background-color: #FFFFFF;
		border-radius: 10px;
		margin: 0 15px 10px;
		padding: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	
	.sign-header {
		margin-bottom: 15px;
	}
	
	.sign-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-right: 10px;
	}
	
	.sign-desc {
		font-size: 12px;
		color: #999;
	}
	
	.sign-days {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}
	
	.sign-day-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40px;
	}
	
	.day-num {
		width: 30px;
		height: 30px;
		border-radius: 15px;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}
	
	.sign-day-item.signed .day-num {
		background-color: #1296db;
		color: #FFFFFF;
	}
	
	.sign-day-item.today .day-num {
		background-color: #FFFFFF;
		color: #1296db;
		border: 1px solid #1296db;
	}
	
	.day-text {
		font-size: 12px;
		color: #999;
	}
	
	.sign-day-item.signed .day-text {
		color: #1296db;
	}
	
	.sign-btn {
		height: 40px;
		background-color: #1296db;
		color: #FFFFFF;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
	
	.sign-btn.signed {
		background-color: #f5f5f5;
		color: #999;
	}
	
	/* 资讯和题库共用样式 */
	.section {
		background-color: #FFFFFF;
		margin-bottom: 10px;
		padding: 15px;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
	
	.more-link {
		font-size: 14px;
		color: #999;
	}
	
	/* 招聘资讯 */
	.news-list {
		
	}
	
	.news-item {
		display: flex;
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.news-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	.news-image {
		width: 100px;
		height: 70px;
		border-radius: 5px;
		margin-right: 10px;
	}
	
	.news-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.news-title {
		font-size: 14px;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.news-info {
		display: flex;
		justify-content: space-between;
	}
	
	.news-source, .news-time {
		font-size: 12px;
		color: #999;
	}
	
	/* 热门题库 */
	.hot-banks {
		
	}
	
	.bank-item {
		background-color: #f9f9f9;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 10px;
	}
	
	.bank-item:last-child {
		margin-bottom: 0;
	}
	
	.bank-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.bank-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
	
	.bank-count {
		font-size: 14px;
		color: #999;
	}
	
	.bank-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.bank-tag {
		font-size: 12px;
		color: #1296db;
		background-color: rgba(18, 150, 219, 0.1);
		padding: 2px 8px;
		border-radius: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	
	.bank-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.bank-users {
		font-size: 12px;
		color: #999;
	}
	
	.bank-btn {
		font-size: 14px;
		color: #FFFFFF;
		background-color: #1296db;
		padding: 5px 15px;
		border-radius: 15px;
	}
</style>